<template>
  <div class="system-log">
    <!-- 搜索区域 -->
    <el-form :inline="true" :model="searchForm" class="search-form">
      <el-form-item label="操作用户">
        <el-input v-model="searchForm.operateUser" placeholder="请输入操作用户"></el-input>
      </el-form-item>
      <el-form-item label="用户IP">
        <el-input v-model="searchForm.userIp" placeholder="请输入用户IP"></el-input>
      </el-form-item>
      <el-form-item label="操作时间">
        <el-date-picker
          v-model="searchForm.timeRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮组 -->
    <div class="operation-buttons">
      <el-button type="primary" plain icon="el-icon-download" @click="handleExport">导出</el-button>
    </div>

    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="index"
        label="序号"
        width="60">
      </el-table-column>
      <el-table-column
        prop="operateUser"
        label="操作用户"
        width="120">
      </el-table-column>
      <el-table-column
        prop="operateContent"
        label="操作内容"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="userIp"
        label="用户IP"
        width="140">
      </el-table-column>
      <el-table-column
        prop="operateTime"
        label="时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="spendTime"
        label="所用时长"
        width="100">
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SystemLog',
  data() {
    return {
      searchForm: {
        operateUser: '',
        userIp: '',
        timeRange: []
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      selectedRows: []
    }
  },
  methods: {
    handleSearch() {
      // 实现搜索逻辑
      this.fetchData()
    },
    resetForm() {
      this.searchForm = {
        operateUser: '',
        userIp: '',
        timeRange: []
      }
    },
    handleExport() {
      // 实现导出逻辑
    },
    handleSelectionChange(val) {
      this.selectedRows = val
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    fetchData() {
      // 模拟数据
      this.tableData = [
        {
          index: 1,
          operateUser: 'test001',
          operateContent: '用户系统登录',
          userIp: '192.168.139.65',
          operateTime: '2023-06-19 08:25:40',
          spendTime: '1.2s'
        }
        // ... 其他数据
      ]
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

<style scoped>
.system-log {
  padding: 20px;
}
.search-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}
.operation-buttons {
  margin-bottom: 20px;
}
.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
